<template>
  <div>
    <el-button type="primary"
               :disabled="!auditIds.length"
               @click="auditBatch">
      通过审核
    </el-button>
    <el-table ref="auditListTable"
              :data="releaseProductList"
              style="width: 100%"
              height="600"
              row-key="id"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55">
      </el-table-column>
      <el-table-column :prop="index"
                       :label="item"
                       v-for="(item,index) in tableColumList"
                       :key="index"
                       
                       >
        <template slot-scope="scope">
          <div v-if="item == `状态`">
            <el-tag size="medium"
                    v-if="scope.row.productStatus==0">待审核</el-tag>
          </div>
          <div v-else-if="item== `封面主图`">
            <el-image :src="scope.row.productCoverImage"
             style="width: 100px; height: 100px" 
                      :no-cache="true">
              <div slot="error"
                   class="image-slot">
                <i>暂无图片</i></i>
              </div>
            </el-image>
          </div>
          <div v-else-if="item== `商品类型`">
            <span>{{scope.row.categoryBean.name}}</span>
          </div>

          <div v-else-if="item == `操作`"
               style="display:inline-block">
            <el-button type="primary"
                       icon="el-icon-more"
                       @click="audit(scope.row)"
                       circle> </el-button>
            <el-button type="danger"
                       icon="el-icon-delete"
                       circle
                       @click="auditRejected(scope.row)">
            </el-button>
          </div>
          <div v-else>
            <span>{{scope.row[index]}}</span>
          </div>

        </template>
      </el-table-column>

    </el-table>

    <el-dialog title="图片详情"
               :visible="auditDialogVisible"
               :before-close="handleDialogClose"
               width="75%"
               top="15px">
      <el-carousel indicator-position="outside"
                   height="650px">
        <el-carousel-item v-for="(item , index ) in detailImageList "
                          :key="item"
                          :index = "index"
                          >
          <img :src="item.productDetailImage"
               style="width: 100%;height: 100%">
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ProductList',
  components: {},
  data() {
    return {
      releaseProductList: [],
      tableColumList: {
        productCoverImage: "封面主图",
        productDesc: "商品描述",
        productType: "商品类型",
        productPrice: "商品价格",
        productQuality: "商品质量",
        productSataus: "状态",
        productCreateTime: "创建时间",
        tool: "操作",
      },
      checkList: [],
      auditDialogVisible: false,
      // 详情图片列表
      detailImageList: [],
      // 详情图片总数
      imgTota: 0,
      //审核选中的ID 批量审核
      auditIds: [],

    }
  },
  created() {
    this.getReleaseProductList();
  },
  methods: {
    //获取审核商品列表
    getReleaseProductList() {
      this.getRequest("/product/api/getReleaseProductList").then((res) => {
        if (res.code == 200 && res.msg == "success"
        && res.data.length > 0) {
          this.releaseProductList = res.data;
        }else {
          this.releaseProductList = [];
          this.$message({
            type:"info" , 
            message:"暂无数据"
          })
        }
      })
    },

    //审核拒绝的点击事件
    auditRejected(row) {
      this.$alert("确认拒绝通过审核吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showCancelButton: true,
        type: "warning",
      }).then(() => {
        this.deleteRequest("/product/api/auditRejected/" + row.id,).then((res) => {
          if (res.code == 200 && res.msg == "success") {
            this.$message({
              type: "success",
              message: "拒绝通过审核"
            })
            //重新加载表格数据
            this.getReleaseProductList();
          } else {
            this.$message({
              type: "error",
              message: "操作失败"
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消"
        })
      })
    },
    // 表格checkbox 监听
    handleSelectionChange(val) {
      this.auditIds = val.map((item) => {
        return item.id;
      });


    },
    //审核按钮 
    audit(row) {
      this.getRequest("/productImage/api/getProductDetailImageList/" + row.id)
        .then((res) => {
          console.log(res);
          this.detailImageList = res.data;
          this.imgTotal = res.total;
        })


      this.auditDialogVisible = true;
    },

    // 点击右上角的关闭按钮
    handleDialogClose() {
      this.auditDialogVisible = false;
    },
    //批量审核
    auditBatch() {
     
    this.$confirm("确认通过审核吗?" , "提示" , {
      confirmButtonText:"确定" , 
      cancelButtonText:"取消" , 
      showCancelButton:true , 
      type:"info" 
    }).then(()=>{
      this.putRequest("/product/api/auditBatch" , this.auditIds).then((res)=>{
        if(res.code == 200 && res.msg == "success"){
          this.$message({
            type:"success" , 
            message:"审核通过",
            duration:500
          })
          setTimeout(()=>{
          this.getReleaseProductList();

          } , 500)
        }else{
          this.$message({
            type:"error" , 
            message:"操作失败"
          })
        }
      })
    })
    .catch(()=>{
      this.$message({
        type:"info" , 
        message:"已取消"
      })
    })
    }
  },
}
</script>

<style scoped>
</style>